<!DOCTYPE html>
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Version 6.0 of the Documentation theme for Jekyll reverts back to relative links so you can view the files offline. Additionally, you can store pages in subd...">
<meta name="keywords" content="formatting,  release notes, announcements, what's new, new features">
<title>Workflow maps | 常见故障解决方案</title>
<link rel="stylesheet" href="css/syntax.css">


<link rel="stylesheet" type="text/css" href="css/font-awesome.min-4.5.0.css">
<!--<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">-->
<link rel="stylesheet" href="css/modern-business.css">
<link rel="stylesheet" href="css/lavish-bootstrap.css">
<link rel="stylesheet" href="css/customstyles.css">
<link rel="stylesheet" href="css/theme-blue.css">


<script type="text/javascript" charset="utf8" src="js/jquery.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/jquery.navgoco.min.js"></script>


<script src="js/bootstrap.min.js"></script>
<script src="js/anchor.min.js"></script>
<script src="js/toc.js"></script>
<script src="js/customscripts.js"></script>

<link rel="shortcut icon" href="images/favicon.ico">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://cdn.bootcss.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<link rel="alternate" type="application/rss+xml" title="" href="feed.xml">

    <script>
        $(document).ready(function() {
            // Initialize navgoco with default options
            $("#mysidebar").navgoco({
                caretHtml: '',
                accordion: true,
                openClass: 'active', // open
                save: false, // leave false or nav highlighting doesn't work right
                cookie: {
                    name: 'navgoco',
                    expires: false,
                    path: '/'
                },
                slide: {
                    duration: 400,
                    easing: 'swing'
                }
            });

            $("#collapseAll").click(function(e) {
                e.preventDefault();
                $("#mysidebar").navgoco('toggle', false);
            });

            $("#expandAll").click(function(e) {
                e.preventDefault();
                $("#mysidebar").navgoco('toggle', true);
            });

        });

    </script>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>

    

</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container topnavlinks">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="fa fa-home fa-lg navbar-brand" href="index.html">&nbsp;<span class="projectTitle"> 常见故障解决方案</span></a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <!-- entries without drop-downs appear here -->
                
                
                
                <li><a href="index.html">重新搜索</a></li>
                
                
                
                <!-- entries with drop-downs appear here -->
                <!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
                
                
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">其他文档入口<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        
                        
                        <li><a href="index.html">常见故障解决方案</a></li>
                        
                        
                        
                        <li><a href="p1_sample1.html">常用语法</a></li>
                        
                        
                    </ul>
                </li>
                
                
                
			<li><a class="email" title="问题反馈" href="#" onclick="javascript:window.location='mailto:Merlin_Wu@apllogistics.com?subject=《常见故障解决方案》反馈&body=%0D____________________________________________________________________%0D问题页面：%09Workflow maps %0D问题地址：%09' + window.location.href;"><i class="fa fa-envelope-o"></i> 邮件反馈</a><li>

		
                <!--comment out this block if you want to hide search-->
                <li>
                    <!--start search-->
                    <!-- <div id="search-demo-container">
                        <input type="text" id="search-input" placeholder="search...">
                        <ul id="results-container"></ul>
                    </div>
                    <script src="js/jekyll-search.js" type="text/javascript"></script>
                    <script type="text/javascript">
                            SimpleJekyllSearch.init({
                                searchInput: document.getElementById('search-input'),
                                resultsContainer: document.getElementById('results-container'),
                                dataSource: 'search.json',
                                searchResultTemplate: '<li><a href="{url}" title="Workflow maps">{title}</a></li>',
                    noResultsText: 'No results found.',
                            limit: 10,
                            fuzzy: true,
                    })
                    </script> -->
                    <!--end search-->
                </li>
            </ul>
        </div>
        </div>
        <!-- /.container -->
</nav>

<!-- Page Content -->
<div class="container">
    <div class="col-lg-12">&nbsp;</div>
    <!-- Content Row -->
    <div class="row">
        <!-- Sidebar Column -->
        <div class="col-md-3">

          












<!--  -->


<ul id="mysidebar" class="nav">
    <li class="sidebarTitle">目录 </li>
    
    
    
        
    
    <li>
        <a href="#">常用操作</a>
        <ul>
            
            
            
            <li><a href="index.html">搜索</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_introduction.html">Introduction</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_supported_features.html">Supported features</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_about.html">About the theme author</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_support.html">Support</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Release Notes</a>
        <ul>
            
            
            
            <li><a href="mydoc_release_notes_60.html">6.0 Release notes</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_release_notes_50.html">5.0 Release notes</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Installation</a>
        <ul>
            
            
            
            <li><a href="mydoc_about_ruby_gems_etc.html">About Ruby, Gems, Bundler, etc.</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_install_jekyll_on_mac.html">Install Jekyll on Mac</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_install_jekyll_on_windows.html">Install Jekyll on Windows</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Authoring</a>
        <ul>
            
            
            
            <li><a href="mydoc_pages.html">Pages</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_posts.html">Posts</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_lists.html">Lists</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_conditional_logic.html">Conditional logic</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_content_reuse.html">Content reuse</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_collections.html">Collections</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_webstorm_text_editor.html">WebStorm editor tips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_atom_text_editor.html">Atom editor tips</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Navigation</a>
        <ul>
            
            
            
            <li><a href="mydoc_sidebar_navigation.html">Sidebar navigation</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_yaml_tutorial.html">YAML tutorial in the context of Jekyll</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_tags.html">Tags</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_series.html">Series</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Formatting</a>
        <ul>
            
            
            
            <li><a href="mydoc_adding_tooltips.html">Tooltips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_alerts.html">Alerts</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_icons.html">Icons</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_images.html">Images</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_code_samples.html">Code samples</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_labels.html">Labels</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_hyperlinks.html">Links</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_navtabs.html">Navtabs</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_tables.html">Tables</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_syntax_highlighting.html">Syntax highlighting</a></li>
            
            
            
            
            
            
            <li class="active"><a href="mydoc_workflow_maps.html">Workflow maps</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Handling reviews</a>
        <ul>
            
            
            
            <li><a href="mydoc_commenting_on_files.html">Commenting on files</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Publishing</a>
        <ul>
            
            
            
            <li><a href="mydoc_build_arguments.html">Build arguments</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_themes.html">Themes</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_generating_pdfs.html">Generating PDFs</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_help_api.html">Help APIs and UI tooltips</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_search_configuration.html">Search configuration</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_iterm_profiles.html">iTerm profiles</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_push_build_to_server.html">Pushing builds to server</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_no_password_prompts_scp.html">Getting around the password prompts in SCP</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_publishing_github_pages.html">Publishing on Github Pages</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Special layouts</a>
        <ul>
            
            
            
            <li><a href="mydoc_kb_layout.html">Knowledge-base layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_glossary.html">Glossary layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_faq_layout.html">FAQ layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_scroll.html">Scroll layout</a></li>
            
            
            
            
            
            
            <li><a href="mydoc_shuffle.html">Shuffle layout</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Troubleshooting</a>
        <ul>
            
            
            
            <li><a href="mydoc_troubleshooting.html">Troubleshooting</a></li>
            
            
            
            
        </ul>
        
        
    
    <li>
        <a href="#">Tag archives</a>
        <ul>
            
            
            
            <li><a href="mydoc_tag_archives_overview.html">Tag archives overview</a></li>
            
            
            
            <li class="subfolders">
                <a href="#">Tag archive pages</a>
                <ul>
                    
                    
                    
                    <li><a href="tag_formatting.html">Formatting pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_navigation.html">Navigation pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_content_types.html">Content types pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_publishing.html">Publishing pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_special_layouts.html">Special layout pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_collaboration.html">Collaboration pages</a></li>
                    
                    
                    
                    
                    
                    <li><a href="tag_troubleshooting.html">Troubleshooting pages</a></li>
                    
                    
                    
                </ul>
            </li>
            
            
            
            
        </ul>
        
        
        
        <!-- if you aren't using the accordion, uncomment this block:
           <p class="external">
               <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
           </p>
           -->
    </li>
</ul>
</div>

<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->
<script>$("li.active").parents('li').toggleClass("active");</script>

    <!-- Content Column -->
    <div class="col-md-9">
        <div class="post-header">
   <h1 class="post-title-main">Workflow maps</h1>
</div>



<div class="post-content">

   
    <div class="summary">Version 6.0 of the Documentation theme for Jekyll reverts back to relative links so you can view the files offline. Additionally, you can store pages in subdirectories. Templates for alerts and images are available.</div>
   

    
    
<!-- this handles the automatic toc. use ## for subheads to auto-generate the on-page minitoc. if you use html tags, you must supply an ID for the heading element in order for it to appear in the minitoc. -->
<script>
$( document ).ready(function() {
  // Handler for .ready() called.

$('#toc').toc({ minimumHeaders: 0, listType: 'ul', showSpeed: 0, headers: 'h2,h3,h4' });

/* this offset helps account for the space taken up by the floating toolbar. */
$('#toc').on('click', 'a', function() {
  var target = $(this.getAttribute('href'))
    , scroll_target = target.offset().top

  $(window).scrollTop(scroll_target - 10);
  return false
})
  
});
</script>

<div id="toc"></div>

    

    

    

    

  <h2 id="workflow-maps-overview">Workflow maps overview</h2>

<p>You can implement workflow maps at the top of your pages. This is helpful if you’re describing a process that involves multiple topics. See the following demos:</p>

<ul>
  <li>[Simple workflow maps][p2_sample1]</li>
  <li>[Complex workflow maps][p2_sample6]</li>
</ul>

<h2 id="simple-workflow-maps">Simple workflow maps</h2>

<ol>
  <li>
    <p>Create an include at _includes/custom/usermap.html, where usermap.html contains the workflow and links you want. See the usermap.html as an example. It should look something like this:</p>

    <div class="language-xml highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"userMap"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"p2_sample1.html"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"box box1"</span><span class="nt">&gt;</span>Connect to ADB<span class="nt">&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"arrow"</span><span class="nt">&gt;</span>→<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"p2_sample2.html"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"box box2"</span><span class="nt">&gt;</span>Download and Build the Starter Kit<span class="nt">&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"arrow"</span><span class="nt">&gt;</span>→<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"p2_sample3.html"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"box box3"</span><span class="nt">&gt;</span>Take a Tour<span class="nt">&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"arrow"</span><span class="nt">&gt;</span>→<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"p2_sample4.html"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"box box4"</span><span class="nt">&gt;</span>Load Your Widgets<span class="nt">&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"arrow"</span><span class="nt">&gt;</span>→<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"content"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"p2_sample5.html"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"box box5"</span><span class="nt">&gt;</span>Query for Something<span class="nt">&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"clearfix"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code></pre>
    </div>

    <p>You can have only 5 possible workflow squares across. Also, the links must be manually coded HTML like those shown, not automated Markdown links. (This is because the boxes are linked.)</p>
  </li>
  <li>
    <p>Where you want the user maps to appear, add the sidebar properties shown in red below:</p>

    <pre>
---
title: Sample 1 Topic
keywords: sample
summary: "This is just a sample topic..."
sidebar: product2_sidebar
permalink: p2_sample1
folder: product2
<span class="red">simple_map</span>: true
<span class="red">map_name</span>: usermap
<span class="red">box_number</span>: 1
---
</pre>

    <p>In the page.html layout, the following code gets activated when <code class="highlighter-rouge">simple_map</code> equals <code class="highlighter-rouge">true</code>:</p>

    <div class="highlighter-rouge"><pre class="highlight"><code><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">if</span><span class="w"> </span><span class="err">page.simple_map</span><span class="w"> </span><span class="err">==</span><span class="w"> </span><span class="err">true</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
    
</span><span class="err">&lt;script&gt;</span><span class="w">
    </span><span class="err">$(document).ready</span><span class="w"> </span><span class="err">(</span><span class="w"> </span><span class="err">function()</span><span class="p">{</span><span class="w">
        </span><span class="err">$('.box{{page.box_number</span><span class="p">}</span><span class="err">}').addClass('active');</span><span class="w">
    </span><span class="err">});</span><span class="w">
</span><span class="err">&lt;/script&gt;</span><span class="w">
    
</span><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">include</span><span class="w"> </span><span class="err">custom/{{page.map_name</span><span class="p">}</span><span class="err">}.html</span><span class="w"> </span><span class="err">%}</span><span class="w">
    
</span><span class="p">{</span><span class="err">%</span><span class="w"> </span><span class="err">endif</span><span class="w"> </span><span class="err">%</span><span class="p">}</span><span class="w">
</span></code></pre>
    </div>

    <p>The script adds an <code class="highlighter-rouge">active</code> class to the box number, which automatically makes the active workflow box become highlighted based on the page you’re viewing.</p>

    <p>The <code class="highlighter-rouge">map_name</code> gets used as the name of the included file.</p>
  </li>
</ol>

<h2 id="complex-workflow-maps">Complex workflow maps</h2>

<p>The simpler user workflow allows for 5 workflow steps. If you have a more complex workflow, with multiple possible steps, branching, and more, consider using a complex workflow map. This map uses modals to show a list of instructions and links for each step.</p>

<ol>
  <li>
    <p>Create an include at _includes/custom/usermapcomplex.html, where usermapcomplex.html contains the workflow and links you want. See the usermapcomplex.html as an example. The code in that file simply implements Bootstrap modals to create the pop-up boxes. Add your custom content inside the modal body:</p>

    <p>```</p>
    <div class="modal-body">
<p>This is just dummy text ... Your first steps should be to get started. You will need to do the following:</p>
    
    <ul>
        <li><a href="p2_sample6.html">Sample 6</a></li>
        <li><a href="p2_sample7.html">Sample 7</a></li>
        <li><a href="p2_sample8.html">Sample 8</a></li>
    </ul>
    <p>If you run into any of these setup issues, you must solve them before you can continue on.</p>
    
          </div>
    <p>```</p>

    <p>The existing usermapcomplex.html file just has 3 workflow square modals. If you need more, duplicate the modal code. In the duplicated code, make sure you make the following values in red unique (but the same within the same modal):</p>

    <pre>
 &lt;button type="button" class="btn btn-default btn-lg modalButton3" data-toggle="modal" data-target="<span class="red">#myModal3</span>"&gt;Publish your app&lt;/button&gt;
       <!-- Modal -->
       &lt;div class="modal fade" id="<span class="red">myModal3</span>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
 </pre>
  </li>
  <li>
    <p>For each topic where you want the modal to appear, insert the following properties in your frontmatter:</p>

    <pre>
---
title: Sample 6 Topic
keywords: sample
summary: "This is just a sample topic..."
sidebar: product2_sidebar
permalink: p2_sample6
<span class="red">complex_map: true</span>
<span class="red">map_name: usermapcomplex</span>
<span class="red">box_number: 1</span>
toc: false
folder: product2
---
</pre>

    <p>When your frontmatter contains <code class="highlighter-rouge">complex_map</code> equal to <code class="highlighter-rouge">true</code>, the following code gets activated in the page layout.html file:</p>

    <p>```
In the page.html layout, the following code gets activated when <code class="highlighter-rouge">map</code> equals <code class="highlighter-rouge">true</code>:</p>

    <p>```
    {% if page.complex_map == true %}</p>

    <div class="highlighter-rouge"><pre class="highlight"><code>&lt;script&gt;
    $(document).ready ( function(){
        $('.modalButton{{page.box_number}}').addClass('active');
    });
&lt;/script&gt;
    
{% include custom/{{page.map_name}}.html %}
    
{% endif %}
```  ```
</code></pre>
    </div>
  </li>
</ol>



    <div class="tags">
        
        <b>Tags: </b>
        
        
        
        <a href="tag_formatting.html" class="btn btn-default navbar-btn cursorNorm" role="button">formatting</a>
        
        
        
    </div>

    

</div>

<hr class="shaded"/>

<footer>
            <div class="row">
                <div class="col-lg-12 footer">
               &copy;2016 . All rights reserved. <br />
<span>Page last updated:</span> July 16, 2016<br/> Site last generated: Oct 8, 2016 <br />
<!-- <p><img src="images/company_logo.png" alt="Company logo"/></p> -->
                </div>
            </div>
</footer>


    </div>
    <!-- /.row -->
</div>
<!-- /.container -->
    </div>

</body>

</html>
